<!-- 动态页面 -->
<template>
	<view class="activityTab">
		<view class="header">
			<!-- 重写的定位组件 -->
			<locationBox ref="location"></locationBox>

			<view class="search">
				<uv-search v-model="search" height="28"  placeholder="友伴官/内容"
					@custom="handleSearch">
				</uv-search>
			</view>

			<!-- 筛选按钮 -->
			<view class="header-right" @click="setScreenPopShow(true)">
				<uni-icons custom-prefix="iconfont2" type="icon-shaixuan" size="40rpx" color="#333"></uni-icons>
				<text>筛选</text>
			</view>
		</view>

		<view class="content">
			<view class="content-item" v-for="res in listData" :key="res.id">
				<ListItem :data="res" @removeItem="removeItem"></ListItem>
			</view>


			<uni-load-more v-if="listData.length > 0" :status="loadingType"></uni-load-more>
			<noData v-if="listData.length < 1"></noData>
		</view>

		<!-- 弹出层 -->
		<ScreenPop :show="screenPopShow" @setShow="setScreenPopShow" @submit="setScreenValue"></ScreenPop>

		<tabBar></tabBar>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'

	// 页面组件
	import ListItem from './components/list-item.vue'
	import ScreenPop from './components/screenPop.vue'

	// api请求
	import {
		getArtistMomentListApi, // 艺人动态列表
	} from '@/api/artist.js'

	export default {
		name: 'activityTab',
		components: {
			ListItem,
			ScreenPop
		},
		data() {
			return {
				listData: [], // 列表数据
				loadingType: 'loading', // 是否显示更多

				search: '', // 搜索

				screenData: {}, // 筛选

				current: 1, // 当前页

				screenPopShow: false, // 是否显示筛选组件
				cityCode: '', // 城市

			}
		},

		computed: {
			...mapState({
				isShow: state => state.user.isShow, // 是否拦截刷新
			}),

			...mapGetters(['userInfo','locationInfo']),
			
		},


		created() {

		},


		//滑动到底部
		onReachBottom() {
			this.current++
			this.getArtistMomentList({
				pageNum: this.current,
				pageSize: 10
			})
		},

		onShow() {
			if(Object.keys(this.userInfo).length<1){
				uni.reLaunch({
					url: '/pages/login/login'
				});
			}
			
			
			// tab选择哪个icon
			this.setTabCurrent(3)
			console.log('执行了吗222222222222',this.isShow);
			// 拦截刷新
			if (!this.isShow) return

			// 初始化
			this.init()



		},
		onHide() {
			// 当离开页面而不是离开应用时，恢复正常
			this.setIsShow(true)
		},
		watch: {
			locationInfo:{
				handler(){
					if(this.locationInfo.cityCode !== this.cityCode){
						this.init()
					}
				},
				deep:true,
			}
		},
		methods: {
			...mapMutations(['setTabCurrent', 'setIsShow']),

			/**
			 * 初始化
			 */
			init() {
				// 没有离开页面，只要发起请求后也同样恢复正常
				this.setIsShow(true)

				// loading状态
				this.loadingType = 'loading'

				this.listData = []
				this.current = 1

				this.getArtistMomentList({
					pageNum: this.current,
					pageSize: 10
				})

			},


			/**
			 * 请求数据
			 */
			async getArtistMomentList(params) {

				try {
					// 搜索
					if (this.search !== "") {
						params['keywords'] = this.search
					}

					// 筛选
					if (Object.keys(this.screenData).length > 0) {
						Object.assign(params, this.screenData)
					}
					
					// 城市
					if (Object.keys(this.locationInfo).length > 0) {
						for (let key in this.locationInfo) {
							if (this.locationInfo[key] !== '') {
								params[key] = this.locationInfo[key]
							}
						}
					}



					const res = await getArtistMomentListApi(params)

					if (res.code !== 200) {
						this.$public.showText(res.msg || '请求失败')
						return
					}

					if (res.rows.length < 10) {
						this.loadingType = 'noMore'
					}

					this.listData.push(...res.rows)

				} catch (e) {
					console.log(e);
				}




			},



			/**
			 * 搜索
			 */
			handleSearch(val) {
				this.search = val
				this.init()
			},


			/**
			 * 删除动态
			 */
			removeItem(val) {
				this.listData.forEach((res, index) => {
					if (res.id === val) {
						this.listData.splice(index, 1)
					}
				})
				
				
				// 如果删除一条数据后小于等于9条，那就再请求一次。如果小于9条那就说明请求回来的数据也没有了，也就不请求了
				if(this.listData.length === 9){
					this.current++
					this.getArtistMomentList({
						pageNum: this.current,
						pageSize: 10
					})
				}
			},

			/**
			 * 打开筛选
			 */
			setScreenPopShow(val) {
				this.screenPopShow = val
			},

			/**
			 * 筛选取值
			 */
			setScreenValue(val) {
				let sertch = {}

				// 格式化筛选的值
				val.map(res => {
					if (res.title === '性别') {
						switch (res.data[0]) {
							case '男友伴':
								sertch['gender'] = 1;
								break;
							case '女友伴':
								sertch['gender'] = 2;
								break;
							case '只看自己':
								sertch['userId'] = this.userInfo.id
								break;
						}
					}

				})

				// 赋值筛选的值
				this.screenData = sertch

				// 关闭弹窗
				this.setScreenPopShow(false)

				this.init()

			},

		}
	}
</script>

<style lang="less" scoped>
	.activityTab {
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(202, 191, 192, 0.2) 100%);
		min-height: 100vh;

		.header {
			#flex(-, -, center);
			#padding(24rpx);
			box-sizing: border-box;


			.search {
				flex: 1;
				border-radius: 26rpx;
				margin-left: 24rpx;
			}

			.placeholder {
				width: 70rpx;
			}

			.header-right {
				#box(60rpx);
				#flex(column, center, center);
				#font(24rpx, #666);
				line-height: 36rpx;
			}


		}

		.content {
			.content-item {
				margin: 24rpx;
			}
		}
	}
</style>